<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轨迹图</title>
    <link rel="stylesheet" href="../../../css/main.css">
    <!--<script src="../../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../mapData/js/echarts/echarts.js"></script>-->
</head>
<body>
<div id="trajectoryMap" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript" src="../../../js/echartsEncapsulation/MapGis.js"></script>
<script type="text/javascript">
    var linedata =[
        {formname:"大罗",toname:"惠丰西街",coords:[[113.169518,36.169646],[113.114885,36.145822]]},
        {formname:"惠丰西街",toname:"清华十字",coords:[[113.114885,36.145822],[113.103274,36.156168]]},
        {formname:"清华十字",toname:"西南关小区",coords:[[113.103274,36.156168],[113.091035,36.169083]]},
        {formname:"西南关小区",toname:"309张公庄路口",coords:[[113.091035,36.169083],[113.070768,36.191907]]},
        {formname:"309张公庄路口",toname:"康宝幼儿园",coords:[[113.070768,36.191907],[113.091896,36.213734]]}

    ];
    var predictlinedata = [
        {formname:"康宝幼儿园",toname:"长北晋东南幼师",coords:[[113.091896,36.213734],[113.115295,36.298479]]},
        {formname:"康宝幼儿园",toname:"潞州宴",coords:[[113.091896,36.213734],[113.123375,36.218933]]},
        {formname:"康宝幼儿园",toname:"凹里坡下",coords:[[113.091896,36.213734],[113.083780,36.274985]]},
        {formname:"康宝幼儿园",toname:"长治市堠北庄镇张祖村民委员会",coords:[[113.091896,36.213734],[113.033550,36.241394]]}
    ];
    var pointdata = [
        {name:'大罗', value:[113.169518,36.169646,'2018-05-11 11:56:23']},
        {name:'惠丰西街', value:[113.114885,36.145822,'2018-05-11 12:56:23']},
        {name:'清华十字', value:[113.103274,36.156168,'2018-05-11 13:56:23']},
        {name:'西南关小区', value:[113.091035,36.169083,'2018-05-11 14:56:23']},
        {name:'309张公庄路口', value:[113.070768,36.191907,'2018-05-11 15:56:23']},
        {name:'康宝幼儿园', value:[113.091896,36.213734,'2018-05-11 16:56:23']}

    ];
    var predictpointdata  = [
        {name:'长北晋东南幼师', value:[113.115295,36.298479,'2018-05-11 18:56:23']},
        {name:'潞州宴', value:[113.123375,36.218933,'2018-05-11 19:56:23']},
        {name:'凹里坡下', value:[113.083780,36.274985,'2018-05-11 20:56:23']},
        {name:'长治市堠北庄镇张祖村民委员会', value:[113.033550,36.241394,'2018-05-11 21:56:23']}
    ];
    //业务数据对象
    var param = new Object();
    param.linedata = linedata;
    param.pointdata = pointdata;
    param.predictlinedata = predictlinedata;
    param.predictpointdata = predictpointdata;
    // map参数对象
    var options = new Object();
    options.mapUrl = path + "/mapData/map/json/shanxi/changzhi.json";
    options.mapName = "changzhi";
    options.map = "changzhi";
    options.zoom = 6;
    options.center = [113.101211, 36.218388];
    options.legenddata = ["正常","预测"];
    options.legendselected = {"正常":true,"预测":false};
    options.legendtop = "top";
    options.series0name = "正常";
    options.series3name = "预测";
    options.series4name = "预测";
    options.series5name = "预测";
    options.displayContent = function (params)
    {
        return "【" + params.value[2] + "】车辆经过【" + params.name +"】";
    }
    options.dataRangeshow = false;
    // 实例化接口对象
    var map = new TMap_Api();
    map.loadTrajectory(param,"trajectoryMap",options);




    /*var mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。

    var linedata =[
            {formname:"大罗",toname:"惠丰西街",coords:[[113.169518,36.169646],[113.114885,36.145822]]},
            {formname:"惠丰西街",toname:"清华十字",coords:[[113.114885,36.145822],[113.103274,36.156168]]},
            {formname:"清华十字",toname:"西南关小区",coords:[[113.103274,36.156168],[113.091035,36.169083]]},
            {formname:"西南关小区",toname:"309张公庄路口",coords:[[113.091035,36.169083],[113.070768,36.191907]]},
            {formname:"309张公庄路口",toname:"康宝幼儿园",coords:[[113.070768,36.191907],[113.091896,36.213734]]}

        ];
    var predictlinedata = [
            {formname:"康宝幼儿园",toname:"长北晋东南幼师",coords:[[113.091896,36.213734],[113.115295,36.298479]]},
            {formname:"康宝幼儿园",toname:"潞州宴",coords:[[113.091896,36.213734],[113.123375,36.218933]]},
            {formname:"康宝幼儿园",toname:"凹里坡下",coords:[[113.091896,36.213734],[113.083780,36.274985]]},
            {formname:"康宝幼儿园",toname:"长治市堠北庄镇张祖村民委员会",coords:[[113.091896,36.213734],[113.033550,36.241394]]}
    ];
    var pointdata = [
            {name:'大罗', value:[113.169518,36.169646,'2018-05-11 11:56:23']},
            {name:'惠丰西街', value:[113.114885,36.145822,'2018-05-11 12:56:23']},
            {name:'清华十字', value:[113.103274,36.156168,'2018-05-11 13:56:23']},
            {name:'西南关小区', value:[113.091035,36.169083,'2018-05-11 14:56:23']},
            {name:'309张公庄路口', value:[113.070768,36.191907,'2018-05-11 15:56:23']},
            {name:'康宝幼儿园', value:[113.091896,36.213734,'2018-05-11 16:56:23']}

    ];
    var predictpointdata  = [
            {name:'长北晋东南幼师', value:[113.115295,36.298479,'2018-05-11 18:56:23']},
            {name:'潞州宴', value:[113.123375,36.218933,'2018-05-11 19:56:23']},
            {name:'凹里坡下', value:[113.083780,36.274985,'2018-05-11 20:56:23']},
            {name:'长治市堠北庄镇张祖村民委员会', value:[113.033550,36.241394,'2018-05-11 21:56:23']}
    ];


    /!*
     * 读取echarts Option配置数据
     *!/
    $(function()
    {
        getOption();
    });
    /!*
     * 读取echarts Option配置数据
     *!/
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/trajectory_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            if(option != null)
            {
                mapOption = option;
                getMap();
            }
        });
    }
    /!*
     * 读取geo地图数据并注入echarts api
     *!/
    var mapChart = echarts.init(document.getElementById('trajectoryMap'));// 初始化echarts对象为mapChart
    function getMap()
    {

        mapChart.showLoading();// 数据加载项，增强用户体验
        // 地图json文件的地址
        var mapUrl = "../../../mapData/map/json/shanxi/changzhi.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            if(json != null)
            {
                echarts.registerMap("chanzghi", json); // 注册地图
                mapOption.geo.map = "chanzghi"; // 设置geo坐标系地图名称
                mapOption.geo.zoom = 6; // 设置地图缩放等级
                mapOption.geo.center = [113.101211, 36.218388];// 设置地图中心点
                mapOption.legend.data = ["正常","预测"];//图例data设置
                mapOption.legend.selected = {"正常":true,"预测":false};//图例选中或不选中
                mapOption.legend.top = "top";//图例y轴位置 上、中、下英文
                mapOption.tooltip.formatter = displayContent;// 设置内容展示
                mapOption.dataRange.show = false; // 设置隐藏或显示值域
                mapOption.series[0].data = linedata; // 设置特效线的渲染数据
                mapOption.series[1].data = linedata; // 设置特效线的渲染数据
                mapOption.series[2].data = pointdata;// 设置特效点的渲染数据
                mapOption.series[3].data = predictlinedata; // 设置预测特效线的渲染数据
                mapOption.series[4].data = predictlinedata; // 设置预测特效线的渲染数据
                mapOption.series[5].data = predictpointdata;// 设置预测特效点的渲染数据

                mapChart.setOption(mapOption);// 把加工好的mapOption注入echarts api
                mapChart.hideLoading();// 数据加载项，增强用户体验
            }
        });
    }
    /!*
     * 设置覆盖物鼠标移上去的展示形式，此处可以自定义，可以做成弹出框等等
     *!/
    var displayContent = function (params)
    {
        return "【" + params.value[2] + "】车辆经过【" + params.name +"】";
    }

    function locate()
    {
        var geo ={
            center: [113.091035,36.169083],
            zoom: 8,
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut'};
        mapChart.setOption({geo : geo});
    }*/
</script>
</html>